<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input type="file" id="file"></input>
  <img id="img"/>
</body>
<script>
  //文件选择文档:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file
  //显示文件缩略图
  // 方式1-https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL
  // 方式2-https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/readAsDataURL
  document.getElementById('file').onchange = function(e){
    // console.log(this.files[0])
    // 不可以
    // document.getElementById('img').src = this.files[0]
    // 方式1-二进制文件,类型blob
    // document.getElementById('img').src = URL.createObjectURL(this.files[0])
    // 方式2-base64图片字符串
    let reader = new FileReader()
    reader.readAsDataURL(this.files[0])
    reader.onload = function(){
      console.log(this.result)
      document.getElementById('img').src =this.result
    }
  }
</script>
</html>
